<template>
    <div>
        <div class="search-content" >
            <div class="line" >
                <span class="wspan">短链标题：</span>
                <el-input v-model="searchContent.remarks" placeholder="请输入" class="input w200"></el-input>
                <el-button type="primary" @click="tip" class="operate" v-if="id">更新标题</el-button>
            </div>
            <div class="line" >
                <span class="wspan">原始地址：</span>
                <el-input v-model="searchContent.long_url" placeholder="请输入网址" class="input w200"></el-input>
                <el-button type="primary" @click="transform" class="operate">点击转换</el-button>
            </div>
            <div class="line short-url">
                <span class="wspan">短链地址：</span>
                <el-input v-model="getShorturl" placeholder="" class="input w200" readonly></el-input>
                <el-button type="primary" @click="copyUrl" class="short-url operate" :data-clipboard-text="getShorturl">点击复制</el-button>
            </div>
        </div>
    </div>
</template>
<script>
import { resize } from "@/common/js/height.js";
import Clipboard from "clipboard";
export default {
    data() {
        return {
            options: [],
            oHeight: 400,
            searchContent: {
                long_url: "",
                remarks: ""
            },
            getShorturl: "",
            id: ""
        }
    },
    created() {},
    methods: {
        //////转换
        transform() {
            const data = { ...this.searchContent }
            this.getShorturl = ""
            this.id = ""
            this.$http.post("/admin/shortUrl/index.php?act=operation&op=create", data)
            .then((res) => {
                if (res.code == 1) {
                    if (res.data) {
                        this.getShorturl = res.data.short_url
                        this.id = res.data.id
                        if (res.data.create_time && res.data.remarks) {
                            this.searchContent.remarks = res.data.remarks
                        }
                    } 
                }
                alert(res.msg)
            })
        },
        // 更新标题
        tip() {
            const data = { id: this.id, remarks: this.searchContent.remarks }
            this.$http.post("/admin/shortUrl/index.php?act=operation&op=update", data)
            .then((res) => {
                alert(res.msg)
            })
        },
        // 复制
        copyUrl() {
            // 复制链接
            const clipboard = new Clipboard('.short-url')
            clipboard.on('success', e => {
                this.$message.success('已成功复制到剪切板')
                clipboard.destroy() // 释放
            })
            clipboard.on('error', e => {
                this.$message.error('复制失败')
                clipboard.destroy() // 释放
            })
        }
    },
  mounted() {
      resize(this)
  }
}
</script>
<style lang="scss" scoped>
.search-content {
 
  &-input {
    width: 200px;
  }
  
  .putaway-time-wrapper {
    .putaway-time-label {
      font-size: 14px;
    }
    display: flex;
    align-items: center;
    /deep/.el-range-separator {
      box-sizing: content-box;
    }
  }
}
.bottom {
    display: flex;
    justify-content: space-between;
     align-items: center;
}
.wspan {
    display: inline-block;
    width: 70px;
    font-size: 13px;
    text-align: left;
   
}
.operate {
    margin-left: 16px;
}
.input{
    width: 300px;
}
.short-url .el-input /deep/ .el-input__inner { 
    border-style: dashed;
    border-color: #C0C4CC;
}
</style>